<template>
<div>
<!--  搜索条件-->
  <div>

  </div>
<!--  用车申请-->
  <div>
    <el-button type="primary" @click="isadd=true">申请使用车辆</el-button>
  </div>
  <el-dialog
      title="新增车辆使用申请"
      v-model="isadd"
      width="50%">
    <div>
      <el-form ref="form" :model="caruse" label-width="80px">
        <el-form-item label="员工id">
          <el-input v-model="caruse.sid"></el-input>
        </el-form-item>
        <el-form-item label="车辆">
          <el-select v-model="caruse.cid" placeholder="请选择使用的车辆">
            <el-option label="宝马525li" value="1"></el-option>
            <el-option label="奔驰GLB2.0" value="2"></el-option>
            <el-option label="保时捷卡宴" value="3"></el-option>
            <el-option label="别克GL8" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用天数">
          <el-input v-model="caruse.days"></el-input>
        </el-form-item>
        <el-form-item label="使用原因">
          <el-input v-model="caruse.reason"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
      <el-button @click="isadd = false">取消</el-button>
      <el-button type="primary" @click="add()">确定申请</el-button>
      </span>
    </template>
  </el-dialog>

  <!--  申请表格-->
  <div style="margin-top: 50px">
    <el-table
        :data="data"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="序号"
          sortable>
      </el-table-column>
      <el-table-column
          prop="cid"
          label="车辆">
      </el-table-column>
      <el-table-column
          prop="days"
          label="使用天数">
      </el-table-column>
      <el-table-column
          prop="flag"
          :formatter="getFlag"
          label="状态">
      </el-table-column>
      <el-table-column
          prop="reason"
          label="使用原因">
      </el-table-column>
      <el-table-column
          prop="ctime"
          label="申请时间">
      </el-table-column>

    </el-table>
  </div>
<!--分页-->
  <div style="float: right;margin-right: 50px;margin-top: 30px">
    <el-pagination
        background
        layout="prev, pager, next"
        :total="100">
    </el-pagination>
  </div>
</div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import axios from "axios";

const caruse=new ref({
  sid:1
})
const isadd=new ref(false)
const data=new ref([])

const add=()=>{
  //实现新增 申请
  console.log(caruse.value)
  //请求后端接口 axios post
  axios.post("cu/add",caruse.value).then(res=>{
    if(res.data.code==0){
      //成功
      alert("亲，申请提交成功，等待审批……")
      isadd.value=false;
      loadData();
    }else {
      alert("申请失败-"+res.data.data);
    }
  })
}
onMounted(()=>{
  loadData();
})

const loadData=()=>{
  //请求接口 获取当前用户的申请记录 axios
  axios.get("cu/my?id="+caruse.value.sid).then(res=>{
    data.value=res.data.data;
  })
}
const getFlag=(row, column)=>{
  const flag = row[column.property]
  var msg="";
  switch (flag){
    case 1:msg="已申请，未审核";break;
    case 2:msg="主管审核通过";break;
    case 3:msg="主管审核驳回";break;
    case 4:msg="经理审核通过";break;
    case 5:msg="经理审核驳回";break;
    case 6:msg="老板审核通过";break;
    case 7:msg="老板审核驳回";break;
  }
  return msg;
}
</script>

<style scoped>

</style>
